<template>
  <div class="mb-20" style="padding-top:44px;">
    <NavBar />
    <div class="flex justify-center">
      <div class="container-width">
        <div class="main">
          <div>
            <div class="xinxizixun mt-8 ">
              信息资讯
            </div>
            <div class="sousuo mt-2 flex justify-between">
              <div class="sousuotext">
                全国新鲜资讯速递，打造个性化资讯库
              </div>
              <div class="sousuoinput flex flex-row">
                <!--
                <div class="inputlable">
                  <el-select v-model="queryList.queryOption" placeholder="全站搜索">
                    <el-option
                      v-for="item in QueryOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
                -->
                <div class="inputcontent">
                  <el-input v-model="queryList.newsname" placeholder="搜索文章"></el-input>
                </div>
                <div class="sousuobutton" @click="handleFilter" style="cursor: pointer;">
                  搜索
                </div>
              </div>

            </div>
            <div class="zixunleixing flex flex-row">
              <div class="zixunlable">
                资讯类型：
              </div>
              <div class="zixuntype flex flex-row">
                <div class="zixuntypeitem" :class="queryList.zixunleixing ? '' : 'active'" @click="selectInfoType(0)" style="cursor: pointer;">
                  全部
                </div>
                <div v-for="(item, index) in sysInfoTypeOptions" :key="index" class="zixuntypeitem" :class="queryList.zixunleixing === item.dictValue ? 'active' : ''" @click="selectInfoType(item.dictValue)" style="cursor: pointer;">
                  {{ item.dictLabel }}
                </div>
              </div>
            </div>
            <div class="fuhetiaojian flex justify-between ">
              <div class="fuhenum">
                共有符合条件的项目 <span>{{ total }} </span>条
              </div>
              <!-- <div class="fabutime">
                <div>发布时间</div>
                <div class="fabutimeIcon">
                  <i class="el-icon-s-fold"></i>
                </div>
              </div> -->
            </div>
            <div class="content mt-6">
              <div v-for="(item, index) in newsList" :key="index" class="contentitem  flex flex-row" @click="goToNewDetailView(item)" style="cursor: pointer;">
                <div class="tupian" style="width:285px;height:161px;">
                  <img style="width:285px;height:161px;" :src="item.pictureurl">
                </div>
                <div class="neirong" style="display:flex;flex-direction: column; width:575px;height:161px;">
                  <div class="neirongtitle" style="height:25px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;cursor: pointer;">
                    {{item.newsname}}
                  </div>
                  <div class="neirongtime" style="height:30px;">
                    {{item.createTime.split(' ')[0]}}
                  </div>
                  <div class="neirongdetail break-normal overflow-hidden" style="height:75px;display: -webkit-box;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 3;-webkit-box-orient: vertical;">
                    {{ item.jianjie }}
                  </div>
                  <div style="height:28px;">
                    <div v-for="(gjc, index) in item.guanjianci.split('、')" :key="index" class="neirongtype">{{ gjc }}</div>
                  </div>
                </div>
              </div>
              <pagination v-show="total>0" :total="total" :page.sync="queryList.pageNum" :limit.sync="queryList.pageSize" @pagination="getList" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { fetchNewsList } from '@/api/news'
import { fetchDictList } from '@/api/dict'
import NavBar from "@/components/NavBar.vue"
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
	name: 'NewsListView',
  components: {
    Pagination,
    NavBar
  },
  data() {
    return {
      total: 0,
      QueryOptions: [{
        value: 0,
        label: '全站搜索'
      }],
      newsList: [],
      sysInfoTypeOptions: [],
      queryList: {
        pageNum: 1,
        pageSize: 10,
        queryOption: 0,
        newsname: undefined,
        zixunleixing: undefined
      }
    }
  },
  created() {
    fetchDictList({dictType: 'sys_info_type'}).then(response => {
      this.sysInfoTypeOptions = response.data
    })
  },
  mounted() {
    if (this.$route.query.searchKey !== undefined && this.$route.query.searchKey !== '') {
      this.queryList.newsname = this.$route.query.searchKey
    }
    this.getList()
  },
  methods: {
    getList() {
      fetchNewsList(this.queryList).then(response => {
        this.total = response.total
        this.newsList = response.data
      })
    },
    goToNewDetailView(project){
      this.$router.push({ name: 'news-detail', params: { id: project.id }})
    },
    selectInfoType(value) {
      if (value === 0) {
        this.queryList.zixunleixing = undefined
      } else {
        this.queryList.zixunleixing = value
      }
      this.handleFilter()
    },
    handleFilter() {
      this.getList()
    },
    setContent(value) {
      const imgReg = /<img.*?(?:>|\/>)/gi;//定义正则表达式（拿到img标签所有值）
      const deArray  = value.match(imgReg);//使用正则表达式，拿到的是数组
      //["<img src="images/01.gif">", "<img src="images/02.gif">"]
      if (deArray != null && deArray != undefined) {
        deArray.forEach(element => {
          value = value.replace(element, "") //放在循环中剔除img标签
        })
      }
      if (!value) return "";
      if (value.length > 300) {
        return value.slice(0, 300) + "...";
      }
      return value
    }
  }
}
</script>

<style lang="scss" scoped>
.contain {
  display: flex;
  justify-content: space-between;
}

.main {}

.main .xinxizixun {
  width: 8.625rem;
  height: 2.625rem;
  font-size: 1.875rem;
  font-family: PingFangHK-Semibold, PingFangHK;
  font-weight: 600;
  color: #000000;
  line-height: 2.625rem;
  letter-spacing: 0.125rem;
}

/* sousuo开始 */
.main .sousuo {
  align-items: baseline;
}

.main .sousuo .sousuotext {
  width: 15.875rem;
  height: 1.25rem;
  font-size: 0.875rem;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #000000;
  line-height: 1.25rem;
}

.main .sousuo .sousuoinput {
  margin-left: 4.375rem;
  width: 34.9375rem;
  height: 2.375rem;
  background: #FFFFFF;
  position: relative;
}

.main .sousuo .sousuoinput .inputlable {
  font-size: 0.875rem;
  font-family: PingFangHK-Medium, PingFangHK;
  font-weight: 500;
  color: #5D6069;
  line-height: 1.25rem;
  border-right: 0.0625rem solid #EFEFEF;

  .el-select {
    ::v-deep .el-input {
      .el-input__inner {
        width: 122px;
        border: 0;
      }
    }
  }
}

.main .sousuo .sousuoinput .inputcontent {
  font-size: 0.875rem;
  font-family: PingFangHK-Semibold, PingFangHK;
  font-weight: 600;
  color: #CBCDD1;
  line-height: 1.25rem;

  .el-input {
    ::v-deep .el-input__inner {
      border: 0;
    }
  }
}

.main .sousuo .sousuoinput .sousuobutton {
  background: #FE7743;
  font-size: 0.625rem;
  font-family: PingFangHK-Semibold, PingFangHK;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 0.875rem;
  padding: 0.4375rem 0.6875rem;
  margin: 0.3125rem;
  position: absolute;
  top: 0;
  right: 0;
}

/* sousuo结束 */
/* zixunleixing开始 */
.main .zixunleixing {
  align-items: baseline;
  height: 2.375rem;
  padding-top: 0.625rem;
  margin-top: 1.75rem;
  background: #FFFFFF;
}

.main .zixunleixing .zixunlable {
  font-size: 0.75rem;
  font-family: PingFangHK-Medium, PingFangHK;
  font-weight: 500;
  color: #9C9C9C;
  padding-left: 0.875rem;
}

.main .zixunleixing .zixuntype {
  margin-left: 1.25rem;
  font-size: 0.75rem;
  font-weight: 400;
  color: #000000;
}

.main .zixunleixing .zixuntype .zixuntypeitem {
  margin-left: 1.5rem;
  padding: 0rem 0.375rem;
}

.main .zixunleixing .zixuntype .zixuntypeitem.active {
  color: #FF5F00;
  border-radius: 0.25rem;
  border: 0.0625rem solid #FF5F00;
  padding: 0rem 0.375rem;
}

/* zixunleixing结束 */

/* fuhetiaojian开始 */
.main .fuhetiaojian {
  margin-top: 1.8125rem;
}

.main .fuhetiaojian .fuhenum {
  font-size: 0.75rem;
  font-family: PingFangHK-Medium, PingFangHK;
  font-weight: 500;
  color: #9C9C9C;
}

.main .fuhetiaojian .fuhenum span {
  color: #FF5F00;
}

.main .fuhetiaojian .fabutime {
  font-size: 0.75rem;
  font-family: PingFangHK-Medium, PingFangHK;
  font-weight: 500;
  color: #FE7743;
  display: flex;
}

.fabutimeIcon{
  margin-left: 0.4rem;
}

/* fuhetiaojian结束 */

/* content开始 */
.main .content {
  background: #FFFFFF;
  padding-bottom: 1.25rem;
}

.main .content .contentitem {
  padding-top: 1.1875rem;
  margin-left: 0.875rem;
}

.main .content .contentitem .tupian {
  min-width: 17.1875rem;
  height: 10.0625rem;
}

.main .content .contentitem .neirong {
  margin-left: 1.0625rem;
}

.main .content .contentitem .neirong .neirongtitle {
  font-size: 1.125rem;
  font-family: PingFangHK-Semibold, PingFangHK;
  font-weight: 600;
  color: #000000;
  line-height: 1.5625rem;
  letter-spacing: 1px;
}

.main .content .contentitem .neirong .neirongtime {
  font-size: 0.875rem;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #999999;
  line-height: 1.25rem;
  padding-top: 0.625rem;
}

.main .content .contentitem .neirong .neirongdetail {
  font-size: 1rem;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #000000;
  line-height: 1.375rem;
  letter-spacing: 1px;
  padding-top: 0.375rem;
  // width: 35.9375rem;
  // height: 4.375rem;
}

.main .content .contentitem .neirong .neirongtype {
  margin-right: 5px;
  padding: 0.1875rem;
  font-size: 0.625rem;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #FE7743;
  border: 1px solid #FE7743;
  display: inline-block;
}
</style>